THE_end's Webplaza

Hjemmeside- kurs --> XML

Dette er introduksjon til XML laget av Stephan Nedregï¿½rd

Innhold

Lengre nede i dokumentet kan du nï¿½r som helst klikke pï¿½ en overskrift (av typen ovenfor) for ï¿½ komme tilbake til innholdsfortegnelsen.

Bakgrunn
Grunnleggende oppbygging
Et eksempeldokument
Stylesheets i XML

Kobling til CSS fra XML-dokumentet
Noen viktige CSS-egenskaper i forbindelse med XML-dokumenter
Tilordning av CSS-stiler til "siden" i XML-dokumenter

Nok et eksempeldokument
HTML i XML
CSS anvendt pï¿½ HTML-elementer i XML
Eksempeldokument med HTML i XML
CDATA
Til slutt

Bakgrunn

En viss kunnskap i HTML og CSS (Cascading Stylesheets) er pï¿½krevd i dette dokumentet. Kjenner du ikke til disse teknologiene, kan du lï¿½re om dem her: HTMLv - CSSv.

Dette dokumentet tar for seg XML som stï¿½ttet i Internet Explorer 5.0 og Mozilla 5 (kommende Netscape 5).

Internet Explorer 5 har en XML-stï¿½tte som kan oppfattes som av noe tvilsom natur. For dem som mï¿½tte vï¿½re interesserte i dette og problemstillinger som reises av den grunn kan ta en titt pï¿½ XML.com's artikkel om XML-stï¿½tten i IE5: [i XML-formatv] - [i HTML-formatv]

Alle XML-dokumenter starter med en linje som identifiserer dokumentet som XML-dokument og angir hvilket tegnsett dokumentet bruker. (Man kan angi mer her, dette omtales senere): <?xml version="1.0" encoding="ISO-8859-1"?>

Tegnsettet ISO-8859-1 (som brukes her) er standardtegnsettet i det vestlige Europa og i USA. Det mï¿½ angis i norske dokumenter dersom vi vil ha stï¿½tte for de norske tegnene ï¿½, ï¿½ og ï¿½ (bï¿½de smï¿½ og store bokstaver).

Deretter kan vi starte ï¿½ skrive XML. XML skrives stort sett som HTML, vi starter og avslutter elementene som i HTML: <bold>Tekst</bold>

Den stï¿½rste forskjellen mellom de to sprï¿½kene er at vi i XML lager elementene selv - vi definerer hvorledes de skal se ut og hvorledes de skal forholde seg til hverandre. Dette gjï¿½res enkelt og greit ved hjelp av Cascading Stylesheets. Ved ï¿½ skrive CSS til vï¿½re elementer, angir vi hvorledes de skal se ut. Dette gjï¿½res akkurat som nï¿½r vi skriver CSS til HTML. Eksempelvis kan vi definere utseendet pï¿½ bold-elementet overfor slik i CSS: bold {display: inline; font-weight: bold;}

Hittil ser alt ganske likt ut, ikke sant? Vel, XML og HTML fungerer ganske likt. Det er likevel et par forskjeller mellom de to:
1. I XML kan vi ikke bruke smï¿½ og store bokstaver om hverandre nï¿½r vi angir elementnavnene. bold, BOLD og Bold er tre forskjellige (mulige) elementer i XML. Om du synes dette er vanskelig, prï¿½v da ï¿½ holde deg til kun smï¿½ bokstaver i elementnavnene.

2. Elementer som kun bestï¿½r av en tagg, altsï¿½ som "kun startes" og ikke avsluttes, slik som <br>, har et minimalt annerledes utseende. Man avslutter elementet samtidig som man starter det, slik: <br/>. Dette fordi XML i utgangspunktet ikke vet hvilke elementer som skal avsluttes pï¿½ vanlig mï¿½te (slik som <h1> i HTML) og hvilke som ikke avsluttes (slik som <br> i HTML).

Et eksempeldokumentv

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="xmlstyle.css"?>
<side>
<overskrift>Eksempeldokument</overskrift>
<tekst>Dette er et eksempeldokument<br/>
Hvori dette er linje 2</tekst>
</side>

Stylesheets i XML

Kobling til CSS fra XML-dokumentet

Du ser et eksempel pï¿½ tilknytning av stylesheet i eksemplet ovenfor. Dette gjï¿½res (som du ser) ved hjelp av fï¿½lgende linje: <?xml-stylesheet type="text/css" href="xmlstyle.css"?>

Dette tilsvarer fï¿½lgende i HTML: <link rel="stylesheet" type="text/css" href="xmlstyle.css">

Noen viktige CSS-egenskaper i forbindelse med XML-dokumenter

CSS-egenskapen display er meget viktig nï¿½r vi definerer utseendet pï¿½ XML-dokumentet vï¿½rt ved hjelp av CSS. display angir hva slags element

inline - elementer slik som b, i, u, dvs. elementer som beskriver tekstomrï¿½der inne i avsnitt og andre blokker
block - blokkelement, slik som p og div, dvs. elementer som utgjï¿½r frittstï¿½ende blokker
list-item (dï¿½rlig stï¿½ttet i nï¿½vï¿½rende browsere)

Som du sï¿½ definerte jeg ovenfor bold som inline. La oss ta et annet element, avsnitt. Dette beskriver et avsnitt ;) - Avsnitt skal dermed vï¿½re et blokkelement, vi skriver derfor fï¿½lgende inn i stylesheetet: avsnitt {display: block;}

For ï¿½ fï¿½ marger mï¿½ vi bruke margin og tilsvarende egenskaper. Marger blir ikke lagt inn automatisk. La oss legge til en marg pï¿½ 1em: avsnitt {display: block; margin-bottom: 1em;}

Derved er avsnitt definert!

Tilordning av CSS-stiler til "siden" i XML-dokumenter

Tilordning av CSS-stiler til "siden" (tilsvarende body i HTML) gjï¿½res pï¿½ forskjellige mï¿½ter i Internet Explorer 5 og Netscape 5/Mozilla. I IE5 gjï¿½res dette ved ï¿½ skrive dem inne i klammer uten ï¿½ sette et elementnavn foran, slik: {background: navy; margin: 0px;}

Dette vil Mozilla-baserte browsere glatt overse. Hos disse tilordner vi stilene til ï¿½verste element (det elementet alle andre elementer befinner seg inne i), slik: side {padding: 10px; background: navy; color: yellow; font-family: arial, sans-serif; display: block;}

Internet Explorer godtar dette, men legger da til en marg rundt det ï¿½verste elementet. For ï¿½ fï¿½ XML-stylesheetet vï¿½rt til ï¿½ fungere i begge browserne mï¿½ vi tilordne bakgrunnsfarge og marg pï¿½ IE5-metoden og sï¿½ bruke Mozilla-metoden: {background: navy; margin: 0px;}
side {padding: 10px; background: navy; color: yellow; font-family: arial, sans-serif;}

Nok et eksempeldokument

Nï¿½ kan du nok til ï¿½ skrive et dokument i XML, slik som fï¿½lgende: (Vi skal komme tilbake til andre detaljer - slik som linking - senere) <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="xmlstyle.css"?> <side> <overskrift>Eksempeldokument</overskrift> <avsnitt> Dette er et eksempeldokument. Vi skal nï¿½ teste skriving av et ganske enkelt (og greit) dokument i <bold>XML</bold>. </avsnitt> <avsnitt> For ï¿½ fï¿½ det rette utseendet er dette dokumentet linket til et stylesheet. </avsnitt> </side>

Og sï¿½ vï¿½rt lille stylesheet (xmlstyle.css): { background: navy; margin: 0px; } side { padding: 10px; background: navy; color: yellow; font-family: arial, helvetica, helv, sans-serif; display: block; } overskrift { display: block; font-size: 18pt; margin-bottom: .5em; } avsnitt { display: block; margin-bottom: 1em; width: 300px; } bold { display: inline; font-weight: bold; }

Ta en titt pï¿½ dette dokumentet! (krever XML-browser)

HTML i XML

Nï¿½ skal vi putte inn noen HTML-elementer i XMLen vï¿½r!

Vi skal ta utgangspunkt i fï¿½lgende eksempel: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="xmlstyle.css"?> <side xmlns:html="http://www.w3.org/TR/REC-html40"> <overskrift>Eksempeldokument</overskrift> <avsnitt> Dette er et eksempeldokument. Vi skal nï¿½ teste skriving av et ganske enkelt (og greit) dokument i <bold>XML</bold>. </avsnitt> <avsnitt> For ï¿½ fï¿½ det rette utseendet er dette dokumentet linket til et stylesheet. </avsnitt> <avsnitt> <html:a href="http://www.micropop.com">Link til MicroPop</html:a> </avsnitt> </side>

Ta en titt pï¿½ dette dokumentet!

Vi refererer her til HTML-sprï¿½ket og bruker elementer fra dette. Det gjï¿½r vi ved fï¿½rst ï¿½ si ifra om at vi skal bruke HTML-sprï¿½ket -- ved ï¿½ angi attributten xmlns:html i det elementet som vi skal benytte HTML innenfor¹. I eksempeldokumentet ovenfor setter vi attributten i side, slik at vi fritt kan benytte HTML-elementer i hele dokumentet.

Vi angir xmlns:html til "http://www.w3.org/TR/REC-html40", som er plasseringen der HTML 4.0 er definert.

For ï¿½ markere at et element er hentet fra HTML-sprï¿½ket mï¿½ vi angi html: foran HTML-elementnavnene². Slik fï¿½r XML-leseren vite at det er et HTML-element vi ï¿½nsker ï¿½ benytte. Hvis vi f.eks. skal benytte HTML-elementet a, gjï¿½r vi dette slik: <html:a href="http://www.micropop.com/">Micropop</html:a>

Likeledes om vi ï¿½nsker ï¿½ benytte h1: <html:h1>Mitt fï¿½rste XML-dokument</html:h1>

Dette er ganske enkelt og greit (nï¿½r man har blitt vant til det). Det som kanskje er litt verre ï¿½ huske pï¿½ er at XML-regelen om at alle elementer mï¿½ avsluttes gjelder ogsï¿½ her! Om vi ï¿½nsker ï¿½ bruke et element som ikke trenger avslutting i HTML, slik som br, mï¿½ vi huske ï¿½ legge til en skrï¿½strek pï¿½ slutten: <html:br/>

Det er heller ikke tillatt med attributter som ikke er satt til noen verdi, slik som f.eks. <hr noshade> og <dl compact>. ï¿½ sette disse til ingenting fungerer derimot bra i bï¿½de IE5 og Mozilla: <html:hr noshade=""/>

CSS anvendt pï¿½ HTML-elementer i XML

Nï¿½r vi skal angi CSS for HTML-elementene vï¿½re, f.eks. a i eksempelet ovenfor, kan vi ikke gjï¿½re slik: html:a {color: white; text-decoration: underline;}

Hvorfor? Fordi kolontegnet har en spesiell funksjon i CSS fra fï¿½r av. (Du har kanskje vï¿½rt borti a:link, p:first-letter eller a:hover fï¿½r?).

Hva vi da skal gjï¿½re? Vi putter inn en backslash (\) foran kolonet. Dette forteller XML-leseren vï¿½r at den ikke skal tolke kolonet pï¿½ CSS-mï¿½ten. Dermed blir dette den riktige stiltilordningen for html:a html\:a {color: white; text-decoration: underline;}

Tilsvarende til a:hover i HTML blir altsï¿½ html\:a:hover. Her er det om ï¿½ gjï¿½re ï¿½ vï¿½re ikke stokke om pï¿½ kolonene!

Eksempeldokument med HTML i XML

Praktisk eksempel pï¿½ bruk av HTML (og CSS for HTML) i et XML-dokument: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="xmlstyle.css"?> <side xmlns:html="http://www.w3.org/TR/REC-html40"> <overskrift>Eksempeldokument</overskrift> <avsnitt> Dette er et eksempeldokument. Vi skal nï¿½ teste skriving av et ganske enkelt (og greit) dokument i <bold>XML</bold>. </avsnitt> <avsnitt> For ï¿½ fï¿½ det rette utseendet er dette dokumentet linket til et stylesheet. </avsnitt> <avsnitt> <html:a href="http://www.micropop.com">MicroPop</html:a> </avsnitt> </side>

Stylesheetet (xmlstyle.css): { background: navy; margin: 0px; } side { padding: 10px; background: navy; color: yellow; font-family: arial, helvetica, helv, sans-serif; display: block; } overskrift { display: block; font-size: 18pt; margin-bottom: .5em; } avsnitt { display: block; margin-bottom: 1em; width: 300px; } bold { display: inline; font-weight: bold; } html\:a {color: white; text-decoration: underline;} html\:a:hover {color: cyan;}

Ta en titt pï¿½ dette dokumentet!

CDATA

(Om fï¿½lgende skulle representere en helt ukjent problemstilling er det bare ï¿½ hoppe over avsnittet. Du vil da ikke fï¿½ bruk for ï¿½ bruke CDATA slik som beskrevet her.)

I XML blir alle 'character entities', slik som f.eks. < (som vi i HTML bruker for mindre-enn-tegn, <, for ï¿½ unngï¿½ at HTML-leseren tolker tegnet som starten pï¿½ en tagg) gjort om til de tegn de representerer fï¿½r dokumentet blir behandlet. <h1> blir dermed behandlet likt med <h1> i XML - i motsetning til i HTML, der fï¿½rstnevnte vil vise frem <h1> i dokumentet.

Til gjengjeld har man en ny og bedre mï¿½te ï¿½ gjengi slike tegn pï¿½. Nï¿½r man f.eks. skal gjengi XML- eller HTML-kode, kan man bruke CDATA: <![CDATA[<h1>Dette er en overskrift</h1>]]>

Vil vise frem: <h1>Dette er en overskrift</h1>

Alt mellom [ og ] vil vises frem som det stï¿½r, uten ï¿½ bli tolket av XML-leseren.

Til slutt

Vi har nï¿½ gï¿½tt gjennom grunnleggende bruk av XML som benyttet av nettleserne Internet Explorer 5.0 og Mozilla/Netscape 5. Eksperimenter, prï¿½v deg frem - ha det gï¿½y. Om det skulle vï¿½re noe, om du skulle oppdage noe rart/nytt eller har noe ï¿½ utsette pï¿½ artikkelen er det bare ï¿½ sende meg en mail pï¿½ [email protected]!

Fotnoter

1: For andre sprï¿½k vil attributten endres til xmlns:sprï¿½k, der sprï¿½k angir sprï¿½ket vi skal bruke elementer fra. Attributten skal alltid settes til en URL der sprï¿½kets elementer er definert for bruk i XML.
2: Dette gjelder for alle namespaces. Nï¿½r vi benytter oss av et namespace (her html) mï¿½ vi alltid angi namespacet fï¿½r elementnavnet vi skal bruke, slik at XML-leseren vet hvilket namespace som skal benyttes. (Det finnes en mï¿½te ï¿½ angi at alt innhold innenfor et element tilhï¿½rer et namespace, men dette fungerer ikke med Internet Explorer 5).